<template>
  <div class="form-preview">

    <div class="form-content">
      <div class="form-content-render">
      <formRender ref="formRenderRef" :FormEntitys="FormEntitys"></formRender>
    </div>
    <div class="form-rule-actions-render">
      <div class="form-rule-actions" v-for="(item,index) in FormRuleActions" :key="index">

<Route :node="item.AllNode"></Route>
<actions :NodeEventActionList="item.NodeEventActionList"></actions>
</div>
    </div>
    </div>
  </div>
</template>

<script setup  lang="ts">
import { ref, reactive, toRefs, onMounted, type Ref, type PropType, computed, watchEffect} from 'vue'
import formRender from '../form-render/index.vue'

import tools from './content/tools.vue'
import type BaseEntity from '../form-render/form-item/components/BaseEntity'
import useForm, { flatFormEntitysFn, type FormRuleActionsType } from '../hooks/useForm'
import useFormRule from '../layout/right/form-setting/form-linkage-rules/hooks/useFormRule'
import { ExecutionTimeType } from '../layout/right/form-setting/form-linkage-rules/actions/class/EventActionEntity'
import Route from '../layout/right/form-setting/form-linkage-rules/node/Route.vue'
import actions from '../layout/right/form-setting/form-linkage-rules/actions/index.vue'


let props=defineProps({
  FormEntitys:{
    type:Array as PropType<Array<BaseEntity>>,
    default:()=>[]
  },
  FormRuleActions:{
    type:Array as PropType<Array<FormRuleActionsType>>,
    default:()=>[] 
  }
})



let {setRenderConfig}=useForm()
setRenderConfig('model','preview')
let formRenderRef = ref()

function checkForm() {
  formRenderRef.value.formRef.validate()
}
</script>
<style scoped lang="less">
.form-preview{
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
   
}
.form-content-render{
  margin-top: 10px;
  height: 100%;
  width: 60%;
  padding: 5px;
  background-color: white;

}
.form-content{
  display: flex;
  width: 100%;
}
.form-rule-actions-render{
  width: 50%;
}
.form-rule-actions{
  width: 100%;
  display: flex;
  margin-bottom: 60px;
}
</style>